/*
 * Copyright (C) 2022 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { Rectangle } from './Rectangle';

export class RectangleCanvas {
  canvas: any;
  context: CanvasRenderingContext2D;
  width: number;
  height: number;
  textColor: string;
  strokeColor: string;
  font: string;
  bgColor: string;
  areas: Array<Rectangle>;
  clickTimeId: any;

  constructor(canvas: any) {
    this.canvas = canvas;
    this.context = this.canvas.getContext('2d'); // 获得画布上下文
    this.width = this.canvas.width; // 宽
    this.height = this.canvas.height; // 高
    this.textColor = '#FFF'; // 文本颜色
    this.strokeColor = '#FFF'; // 边框颜色
    this.font = '12px Consolas'; // 字体
    this.bgColor = 'rgba(200,0,200,0.4)'; // 背景颜色
    this.areas = []; // 子区域
    this.context.font = this.font;
    // 阻止右键菜单弹出
    this.canvas.oncontextmenu = function (event: { preventDefault: () => void }) {
      event.preventDefault();
    };
  }

  // 只清除画布
  clear() {
    this.context.clearRect(0, 0, this.width, this.height);
  }

  // 清除画布和区域
  clearAll() {
    this.context.clearRect(0, 0, this.width, this.height);
    this.areas = [];
  }

  setWidth(width: number) {
    this.width = width;
  }

  setHeight(height: number) {
    this.height = height;
  }

  // 绑定画布鼠标移动事件
  public canvasMouseMoveEvent(tipDiv: any) {
    this.canvas.addEventListener(
      'mousemove',
      (e: { offsetX: number; offsetY: number; }) => {
        this.areas.forEach((area, idx) => {
          if (area.inRectangleRegion(this.context, e.offsetX, e.offsetY)) {
            tipDiv.style.display = 'block';
            tipDiv.getElementsByTagName('span')[0].innerHTML = area.label;
            tipDiv.getElementsByTagName('span')[1].innerHTML = area.value;
            let width = 120;
            if(window.innerWidth < 1600){
              width = -100;
            }
            tipDiv.style.left = e.offsetX + width + 'px';
            tipDiv.style.top = e.offsetY + 20 + 'px';
            area.draw(this);
          } else {
            area.scrim(this);
          }
        });
      }
    );
  }

  // 绑定画布鼠标离开事件
  public canvasMouseLeaveEvent(tipDiv: any) {
    this.canvas.addEventListener('mouseleave', () => {
      this.areas.forEach((area, idx) => {
        area.draw(this);
      });
      tipDiv.style.display = 'none';
    });
  }

  // 绑定画布鼠标点击事件
  public canvasMouseUpEvent(rootRect: Rectangle) {
    let that = this;
    this.canvas.addEventListener('mouseup', (event: { button: number; offsetX: any; offsetY: any }) => {
      let clickX = event.offsetX;
      let clickY = event.offsetY;
      // 取消上次延时未执行的方法
      clearTimeout(this.clickTimeId);
      //执行延时
      this.clickTimeId = setTimeout(function () {
        //此处为单击事件要执行的代码
        if (event.button == 0) {
          // 左键
          if (that.areas.length == 1) {
            return;
          }
          for (let i = 0; i < rootRect.areasAsRoot!.length; i++) {
            let area = rootRect.areasAsRoot?.[i];
            if (area!.inRectangleRegion(that.context, clickX, clickY)) {
              area!.changeToRoot(that);
              area!.areasAsRoot!.forEach((a: { parentRect: any }, i: any) => {
                a.parentRect = area;
              });
              if (area) {
                rootRect = area;
              }
              break;
            }
          }
        }
        if (event.button == 2) {
          // 鼠标右键
          if (!rootRect.parentRect) return;
          rootRect.changeFromRoot(that);
          rootRect = rootRect.parentRect;
        }
      }, 300);
    });
  }
}
